<template>
    <div class="container">
        <div id="data-police"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    props: ['mapWeek'],
    data() {
        return {
            data: [],
            xAxisData: [],
            seriesData: [],
            seriesData1: [],
            ciolData: [],
            sum : 0,
            bottomData : [],
            topData : [],
            ciolColor1 : [
                'rgba(8, 177, 255, 1)',
                'rgba(0, 255, 136,   1)',
                'rgba(8, 177, 255, 1)',
                'rgba(251, 171, 88,   1)',
                'rgba(8, 177, 255, 1)',
                'rgba(251, 171, 88,   1)',
                'rgba(8, 177, 255, 1)',
                'rgba(251, 171, 88,   1)',
            ],
            ciolColor0 : [
                'rgba(107, 255, 243,  1)',
                'rgba(97,253,196,  1)',
                'rgba(107, 255, 243,  1)',
                'rgba(253, 221, 97,  1)',
                'rgba(107, 255, 243,  1)',
                'rgba(253, 221, 97,  1)',
                'rgba(107, 255, 243,  1)',
                'rgba(253, 221, 97,  1)',
            ],
            bottomColor0 : [
                'rgba(8, 177, 255, 0.8)',
                'rgba(0, 255, 136, 0.8)',
                'rgba(8, 177, 255, 0.8)',
                'rgba(251, 171, 88, 0.8)',
                'rgba(8, 177, 255, 0.8)',
                'rgba(251, 171, 88, 0.8)',
                'rgba(8, 177, 255, 0.8)',
                'rgba(251, 171, 88, 0.8)',
            ],
            bottomColor1 : [
                'rgba(107, 255, 243, 0.8)',
                'rgba(100,253,212,0.8)',
                'rgba(107, 255, 243, 0.8)',
                'rgba(253, 227, 100,0.8)',
                'rgba(107, 255, 243, 0.8)',
                'rgba(253, 227, 100,0.8)',
                'rgba(107, 255, 243, 0.8)',
                'rgba(253, 227, 100,0.8)',
            ],
            header0 : [
                'rgba(8, 177, 255, 1)',
                'rgba(0, 255, 136, 1)',
                'rgba(8, 177, 255, 1)',
                'rgba(251, 171, 88, 1)',
                'rgba(8, 177, 255, 1)',
                'rgba(251, 171, 88, 1)',
                'rgba(8, 177, 255, 1)',
                'rgba(251, 171, 88, 1)',
            ],
            header1 : [
                'rgba(107, 255, 243, 1)',
                'rgba(100,253,212,1)',
                'rgba(107, 255, 243, 1)',
                'rgba(253, 227, 100,1)',
                'rgba(107, 255, 243, 1)',
                'rgba(253, 227, 100,1)',
                'rgba(107, 255, 243, 1)',
                'rgba(253, 227, 100,1)',
            ],
            bottom : [
                'rgba(31, 194, 252, 0.4)',
                'rgba(0, 255, 136, 0.4)',
                'rgba(31, 194, 252, 0.4)',
                'rgba(253, 179, 88, 0.4)',
                'rgba(31, 194, 252, 0.4)',
                'rgba(253, 179, 88, 0.4)',
                'rgba(31, 194, 252, 0.4)',
                'rgba(253, 179, 88, 0.4)',
                'rgba(31, 194, 252, 0.4)',
                'rgba(253, 179, 88, 0.4)',
            ],

            
            options: {}
        }
    },
    mounted() {
        this.initPanel();
    },
    methods: {
        initPanel() {
            const that = this;
            // let total = 0;
            // this.mapWeek.forEach(e=> total += e.data_count)
            that.data = that.mapWeek.map(e=>{
                let item = {
                    name: e.src_name,
                    // value: (e.data_count / total * 100).toFixed(2),
                    value: e.data_count,
                }
                return item;
            });
            that.data.forEach((item) => {
                that.xAxisData.push(item.name);
                that.seriesData.push(item.value);
                that.seriesData1.push({
                    name: '',
                    value: item.value
                });
                that.ciolData.push({
                    name: '',
                    value: '0'
                });
                that.sum += item.value;
            });
            that.data.forEach((item) => {
                that.bottomData.push({
                    name: '',
                    value: that.sum - item.value
                });
                that.topData.push({
                    name: '',
                    value: that.sum
                });
            });

            that.options = {
                backgroundColor: 'transparent',
                grid: {
                    top: '15%',
                    left: '2%',
                    right: '2%',
                    bottom: '20%',
                },
                tooltip: {
                    show: true,
                    formatter: function(params) {
                        let text =
                            '<p  style="font-size:16px;font-weight: 400;color:rgba(255, 255, 255, 1);margin-bottom: 20px;"><span style="display:inline-block;width:10px;height: 10px;background: ' +
                            v2L2Chart.color[params.dataIndex] +
                            ';border-radius: 50%;margin-right: 10px;"></span>' +
                            v2L2Chart.xData[params.dataIndex] +
                            '：' +
                            v2L2Chart.data[params.dataIndex] +
                            '</p>';
                        return text;
                    },
                    backgroundColor: 'rgba(38, 68, 110, 0.8)',
                    padding: 10,
                    borderColor: 'rgba(38, 68, 110, 1)',
                    textStyle: {
                        color: '#fff',
                    },
                },

                xAxis: {
                    offset: 20,
                    data: that.xAxisData,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#1FC6FF',
                            fontSize: 16,
                        },
                        interval:0
                    },
                },
                yAxis: {
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                },
                series: [
                    //'最低下的圆片',
                    {
                        name: '最低下的圆片',
                        stack: 'a',
                        // type: 'pictorialBar',
                        // symbolSize: [66, 12],
                        // symbolOffset: [0, 6],
                        type: 'effectScatter',
                        symbolSize: [62, 12],
                        symbolOffset: [0, 0],
                        z: 22,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 1,
                                            color: that.ciolColor0[params.dataIndex],
                                        },
                                        {
                                            offset: 0,
                                            color: that.ciolColor1[params.dataIndex],
                                        },
                                    ]);
                                },
                            },
                        },
                        data: that.ciolData,
                    },
                    //下半截柱状图
                    {
                        name: '下半截柱状图',
                        stack: 'a',
                        type: 'bar',
                        barWidth: 66,
                        z: 2,
                        barGap: '-100%',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 1,
                                            color: that.bottomColor1[params.dataIndex],
                                        },
                                        {
                                            offset: 0,
                                            color: that.bottomColor0[params.dataIndex],
                                        },
                                    ]);
                                },
                            },
                        },
                        data: that.seriesData1,
                    },
                    //替代柱状图 默认不显示颜色，是最下方柱图的value值 - 20'
                    {
                        name: '替代柱状图 默认不显示颜色，是最下方柱图的value值 - 20',
                        // stack: '',
                        type: 'bar',
                        barWidth: 66,
                        barGap: '-100%',
                        // stack: '广告',
                        itemStyle: {
                            color: 'transparent',
                        },
                        data: that.seriesData,
                    },
                    //头部1
                    {
                        name: '头部1',
                        stack: 'a',
                        type: 'pictorialBar',
                        symbolSize: [66, 12],
                        symbolOffset: [0, -6],
                        z: 22,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 1,
                                            color: that.header1[params.dataIndex],
                                        },
                                        {
                                            offset: 0,
                                            color: that.header0[params.dataIndex],
                                        },
                                    ]);
                                },
                            },
                        },
                        symbolPosition: 'end',
                        label: {
                            formatter: '{c}',
                            color: '#fff',
                            offset: [0, -5],
                            show: true,
                            position: 'top',
                            fontSize: 18,
                            fontWeight: 400,
                            fontFamily: 'zcool-gdh',
                        },
                        data: that.seriesData1,
                    },
                    //头部2
                    {
                        name: '头部2',
                        stack: 'a',
                        type: 'pictorialBar',
                        symbolSize: [66, 12],
                        symbolOffset: [0, -6],
                        symbolPosition: 'end',
                        z: 22,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 1,
                                            color: that.header1[params.dataIndex],
                                        },
                                        {
                                            offset: 0,
                                            color: that.header0[params.dataIndex],
                                        },
                                    ]);
                                },
                            },
                        },
                        data: that.topData,
                    },
                    //底色
                    {
                        name: '底色',
                        stack: 'a',
                        type: 'bar',
                        barWidth: 66,
                        z: 2,
                        barGap: '-100%',
                        // stack: '',
                        symbolPosition: 'end',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return that.bottom[params.dataIndex];
                                },
                            },
                        },
                        data: that.bottomData,
                    },
                ],
                }
                let dom = document.getElementById("data-police")
                let myChart = echarts.init(dom);
                that.options && myChart.setOption(that.options);
            }
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    #data-police {
        height: 90%;
        width: 90%;
    }
}
</style>